<template>
  <div>
    <div style="overflow: hidden;" class="inputBox">
      <div style="display: inline-block;">
        <el-button type="success" size='small' @click="dialogVisible">{{$t('智能生成决策')}}</el-button>
        <el-button type="success" size='small' @click="templateDialog" style="margin-right:10px;">{{$t('智能生成模板')}}</el-button>
        <span>
          {{$t('有效数据')}} {{ validCount }}
        </span>
      </div>
      <div class="searchProject">
        <div style="width:160px;display: inline-block;">
          <el-input v-emoji v-model="record.filter_ip" style="margin-bottom:10px;width:155px" size='small' placeholder="IP"></el-input>
        </div>
        <div style="width:160px;display: inline-block;">
          <el-input v-emoji v-model="record.filter_port" style="margin-bottom:10px;width:155px" size='small' :placeholder="$t('端口')"></el-input>
        </div>
        <div style="width:160px;display: inline-block;">
          <!-- <div style="width: 70px;display: inline-block;">{{$t('IP类型')}}</div> -->
          <el-select v-model="record.ip_type" filterable clearable :placeholder="$t('IP类型(默认)')" style="margin-bottom:10px;width:155px" @change="ipTypeChange" size='small'>
            <el-option v-for="item in ipTypeList" :key="item.value" :label="$t(item.label)" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div style="width:160px;display: inline-block;">
          <!-- <div style="width: 70px;display: inline-block;">{{$t('协议类型')}}</div> -->
          <el-select v-model="record.protocol" filterable style="margin-bottom:10px;width:155px" size='small'>
            <el-option v-for="(item,index) in protocolList" :key="index" :label="$t(item.label)" :value="item.value">
            </el-option>
          </el-select>
        </div>

        <div style="width:160px;display: inline-block;">
          <!-- <div style="width: 70px;display: inline-block;">{{$t('子网掩码')}}</div> -->
          <!-- <el-select v-model="record.mask" filterable clearable :placeholder="$t('子网掩码(默认)')" style="margin-bottom:10px;" :default-first-option='true' allow-create size='small' ref="mySelect" @clear="selectClear" v-if="record.ip_type === 'ipv4'" class="maskAutocomplete">
            <div slot="prefix" style="line-height: 32px;float:right;" v-if="maskCustom">{{$t('(自定义)')}}</div>
            <el-option v-for="(item, index) in (maskList[record.ip_type] || [{value: '', label: $t('子网掩码(默认)')}])" :key="index" :label="item.label" :value="item.value">
            </el-option>
          </el-select> -->
          <el-select v-model="record.mask" filterable clearable :placeholder="$t('子网掩码(默认)')" style="margin-bottom:10px;width:155px" size='small'>
            <el-option v-for="(item, index) in (maskList[record.ip_type] || [{value: '', label: $t('子网掩码(默认)')}])" :key="index" :label="$t(item.label)" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div style="width:50px;display: inline-block;">
          <el-button type="success" @click="checkData(record)" size="small">
            <svg-icon icon-class="11C" />
          </el-button>
        </div>
      </div>
    </div>
    <el-divider style="margin: 8px 0;"></el-divider>
    <el-container class="industryContainer">
      <el-aside class="industryPaneLIndustry">
        <div class="industryTreeOutBorder">
          <el-tree :props="props" class="industryTreeGroup" :load="loadNode" lazy ref="industryTreeGroup" :data="groupList" node-key="id" show-checkbox @check-change="handleCheckChange" @node-click='handleNodeClick' :check-strictly='true' :default-expanded-keys='defaultExpanded'>
          </el-tree>
        </div>
      </el-aside>
      <el-aside class="industryPaneLServerChild" v-if="groupChildList.length > 0">
        <div class="industryTreeOutBorderChild">
          <el-tree :props="propsChild" class="industryTreeGroup" ref="industryChildTreeGroup" :data="groupChildList" node-key="id" show-checkbox @check-change="handleSelectionChange" @node-click='handleChildNodeClick' :check-strictly='true'>
          </el-tree>
        </div>
      </el-aside>
      <el-main class="strategyFatherBox" style="width: 100%;padding:5px 0 5px 20px;">
        <el-table size='mini' ref="multipleTable" :data="industryList" tooltip-effect="dark" style="width: 100%" :height="tableHeight" @selection-change="handleSelectionChange">
          <!-- <el-table-column type="selection" align='center' width="55"></el-table-column> -->
          <el-table-column prop="SOURCE_IP" align='center' :label="$t('源IP')" min-width="120">
            <template slot-scope="scope">
              <tooltip :copyText="scope.row.SOURCE_IP" class="wid190">
              </tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="SOURCE_PORT" align='center' :label="$t('源端口')" min-width="80"></el-table-column>
          <el-table-column prop="DESTINATION_IP" align='center' :label="$t('目的IP')" min-width="120">
            <template slot-scope="scope">
              <tooltip :copyText="scope.row.DESTINATION_IP" class="wid190">
              </tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="DESTINATION_PORT" align='center' :label="$t('目的端口')" min-width="80"></el-table-column>
          <el-table-column prop="L4_PROTOCOL" align='center' :label="$t('协议')" min-width="80">
            <template slot-scope="scope">
              {{ scope.row.L4_PROTOCOL.split('_')[0] }}
            </template>
          </el-table-column>
          <el-table-column prop="ORIG_COUNTER_PACKETS" align='center' :label="$t('请求包数')" min-width="100"></el-table-column>
          <el-table-column prop="REPL_COUNTER_PACKETS" align='center' :label="$t('应答包数')" min-width="100"></el-table-column>
          <el-table-column prop="START_TIMESTAMP" align='center' :label="$t('开始发包时间')" min-width="140"></el-table-column>
          <el-table-column prop="STOP_TIMESTAMP" align='center' :label="$t('结束发包时间')" min-width="140"></el-table-column>
          <el-table-column align='center' width='100' fixed="right" :label="$t('操作')">
            <template slot-scope="scope">
              <el-button type="success" plain size="mini" @click="detailDialog(scope.row)">{{$t('查看详情')}}</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="form.page" :page-size="form.limit" layout="slot">
          <el-button size="mini" @click="handleCurrentChange(1)" :disabled="form.page === 1">{{$t('首页')}}</el-button>
          <el-button size="mini" @click="handleCurrentChange(form.page - 1)" :disabled="form.page === 1">{{$t('上一页')}}</el-button>
          <span style="text-align: center;">{{ form.page }}</span>
          <el-button size="mini" @click="handleCurrentChange(form.page + 1)" :disabled="industryList.length < form.limit">{{$t('下一页')}}</el-button>
        </el-pagination>
      </el-main>
    </el-container>
    <industry-dialog v-if="industryDialogVisible" ref="refIndustryDialogVisible" @dialogReVisible='dialogReVisible'></industry-dialog>
    <template-dialog v-if="templateDialogVisible" ref="refTemplateDialogVisible"></template-dialog>
    <re-dialog v-if="reDialogVisible" ref="refReDialogVisible"></re-dialog>
    <detail-dialog v-if="detailDialogVisible" ref="refDetailDialogVisible"></detail-dialog>
  </div>
</template>
<script>
import { getIndustryInfoArray, getIndustryArray, getIndustryChildArray, getIndustryServerClientArray } from '@/api/safe/intellect/industry'
import { getProtocol } from '@/api/safe/intellect/learnServer'
// import splitPane from 'vue-splitpane'
import IndustryDialog from './components/IndustryDialog.vue'
import reDialog from './components/reDialog'
import detailDialog from './components/detailDialog'
import TemplateDialog from './components/TemplateDialog'

export default {
  name: 'industry',
  // splitPane
  components: {
    IndustryDialog,
    reDialog,
    detailDialog,
    TemplateDialog
  },
  data () {
    return {
      industryDialogVisible: false,
      templateDialogVisible: false,
      reDialogVisible: false,
      detailDialogVisible: false,
      industryList: [],
      groupList: [],
      groupChildList: [],
      selectList: {},
      protocolIpuse: {},
      protocolData: [],
      defaultExpanded: [], // tree默认展开
      highlightEvent: null,
      highlightEventChild: null,
      nowProtocol: '', // 用于判断当前点击的协议
      numId: 1,
      groupStr: [],
      groupNode: [],
      groupChildNode: [],
      record: {
        filter_ip: '',
        filter_port: '',
        ip_type: '',
        mask: '',
        protocol: 'iec104'
      },
      nowRecord: {
        filter_ip: '',
        filter_port: '',
        ip_type: '',
        mask: '',
        protocol: 'iec104'
      },
      ipTypeList: [{value: '', label: 'IP类型(默认)'}, {value: 'ipv4', label: 'ipv4'}, {value: 'ipv6', label: 'ipv6'}],
      protocolList: [
    //   {
    //     label: '协议类型(默认)',
    //     value: ''
    // },
    {
        label: this.$t('iec104(默认)'),
        value: 'iec104'
    },
    {
        label: 's7',
        value: 's7'
    },
    {
        label: 'modbus',
        value: 'modbus'
    },
    {
        label: 'opc',
        value: 'opc'
    },
    {
        label: 'opcua',
        value: 'opcua'
    }],
      maskList: {
        ipv4: [{value: '', label: '子网掩码(默认)'}, {value: '8', label: '8'}, {value: '16', label: '16'}, {value: '24', label: '24'}],
        ipv6: [{value: '', label: '子网掩码(默认)'}, {value: '48', label: '48'}, {value: '96', label: '96'}]
      },
      props: {
        label: 'name',
        children: 'child',
        isLeaf: 'leaf'
      },
      propsChild: {
        label: 'name',
        children: 'child'
      },
      ipv4: /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/,
      ipv6: /^\s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:)))(%.+)?\s*$/,
      initSever: true, // 初始化ip
      childFlag: true,
      nowForm: { // 当前列表对应的树的数据
        id: '',
        name: '', // 保存当前列表对应树的名称
        protocol: '' // 保存当前列表的协议类型
      },
      maskValue: '',
      formParents: {
        DESTINATION_IP: '',
        ipType: '',
        protocol: '',
        L4_PROTOCOL: '',
        mask: '',
        DESTINATION_PORT: '',
        filter_ip: '',
        filter_port: ''
      },
      form: {
        serverip: '',
        DESTINATION_IP: '',
        ipType: '',
        protocol: '',
        protocol_num: '',
        mask: '',
        DESTINATION_PORT: '',
        filter_ip: '',
        filter_port: '',
        page: 1,
        limit: 20
      },
      flag: false,
      validCount: 0,
      inputHeight: 42
    }
  },
  computed: {
    tableHeight () {
      return window.innerHeight - 200 - this.inputHeight
    },
    maskCustom () {
      return this.maskList[this.record.ip_type].every(v => v.value !== this.record.mask)
    }
  },
  mounted () {
    getProtocol().then(res => {
      this.protocolData = res.info
      for (let item of res.info) {
        this.protocolIpuse[item.PROTOCOL_NAME] = item.PROTOCOL_NUM
      }
    })
    this.checkData(this.record)
    const that = this     
    this.inputHeight = `${document.getElementsByClassName('inputBox')[0].clientHeight}`// 默认值
    window.onresize = () => {
      // 动态赋值
      that.inputHeight = document.getElementsByClassName('inputBox')[0].clientHeight
    }
  },
  methods: {
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)
      this.form.limit = val
      this.industryListData()
    },
    handleCurrentChange (val) {
      // console.log(`当前页: ${val}`)
      this.form.page = val
      this.industryListData()
    },
    ipTypeChange () {
      this.record.mask = ''
    },
    // 搜索选项校验
    checkData (data) {
      this.industryGroupData(data)
    },
    // 筛选按钮查询数据
    industryGroupData (data) {
      this.groupList = []
      this.industryList = []
      this.groupChildList = []
      this.initSever = true
      this.nowRecord = {
        filter_ip: this.record.filter_ip,
        filter_port: this.record.filter_port,
        ip_type: (this.record.ip_type || 'all'),
        protocol:(this.record.protocol || 'iec104'),
        mask: (this.record.mask || '0')
      }
      // const protocolList = this.protocolList.filter(item =>item.value);
      for (let item of this.protocolList) {
        this.groupList.push({
          id: this.numId,
          name: item.value,
          child: [],
          hasChildren: true
        })
        this.numId += 1
      }
      for (let item of this.groupList) {
        if (this.record.protocol === item.name) {
          this.defaultExpanded.push(item.id)
        }
      }
    //   if (this.groupList && this.groupList.length > 0) {
    //     if(data.protocol) {
    //     this.defaultExpanded.push(this.groupList[0].id)
    //     }
    //  }
      this.$nextTick(() => {
        let treeNode = document.getElementsByClassName('el-tree-node')
        for (let item of treeNode) {
          // if (item.textContent.indexOf('|') < 0) {
          const values = this.protocolList.map(item=> item.value);
          if (values.includes(item.innerText)) {
            item.childNodes[0].childNodes[1].style.display = 'none'
            item.childNodes[0].childNodes[3].style['margin-left'] = '8px'
          }
        }
      })
    },
    // 懒加载
    loadNode (node, resolve) {
      if (node.level === 1) {
        let num = 1
        // let formData = JSON.parse(JSON.stringify(this.record))
        // formData = {
        //   ip_type: (formData.ip_type || 'all'),
        //   mask: (formData.mask || '0'),
        //   protocol: node.data.name
        // }
        this.nowRecord.protocol = node.data.name || 'iec104'
        this.nowProtocol = node.data.name || 'iec104'
        getIndustryArray(this.nowRecord).then(res => {
          let list = []
          for (let item of res.info) {
            list.push({
              id: node.data.id + '-' + num,
              name: item.network_segment[0] + '/' + item.mask,
              ip_type: this.ipv4.test(item.network_segment) ? 'ipv4' : 'ipv6',
              protocol: this.nowRecord.protocol,
              mask: (this.nowRecord.mask || '0'),
              child: []
            })
            num += 1
          }
          if (this.initSever) {
            this.defaultExpanded.push(list[0].id)
          }
          // if (this.groupList && this.groupList.length > 0) {
          //   this.defaultExpanded.push(this.groupList[0].id)
          // }
          return resolve(list)
        }).catch(e => {
          return resolve([])
        })
      }
      if (node.level === 2) {
        let record = {
          network_segment: node.label.split('/')[0],
          ip_type: node.data.ip_type,
          protocol: node.data.protocol,
          mask: node.data.mask,
          filter_ip: this.nowRecord.filter_ip,
          filter_port: this.nowRecord.filter_port
        }
        getIndustryChildArray(record).then(res => {
          let items = res.info
          // let disabled = false
          // if (this.groupNode.length > 0 && (node.parent.label !== this.groupNode[0].ipMask || node.label !== this.groupNode[0].type)) {
          //   disabled = true
          // }
          // 获取到协议层添加id
          let numType = 1
          for (let typeItems of items) {
            const idType = node.data.id + '-' + numType
            numType += 1
            typeItems['id'] = idType
            if (this.initSever) {
              this.defaultExpanded.push(idType)
            }
            // 获取到ip层，添加可用数据和id
            let numChild = 1
            for (let item of typeItems.child) {
              const id = idType + '-' + numChild
              numChild += 1
              item['name'] = item.DESTINATION_IP + ' | ' + item.DESTINATION_PORT // 显示名称
              item['mask'] = node.data.mask // 子网掩码
              item['leaf'] = true // 不懒加载
              item['protocol'] = node.data.protocol // 协议类型
              item['ipMask'] = typeItems.name // 判断在那个ip下，为父级ip
              item['id'] = id
              item['type'] = item.L4_PROTOCOL.split('_')[0] // 网络协议类型，用于判断是否与首选项同一类型，不同则禁止选择
              // item['disabled'] = disabled // 是否禁用
              item['ipType'] = this.ipv4.test(item.DESTINATION_IP) ? 'ipv4' : 'ipv6' // ip类型
            }
          }
          return resolve(items)
        }).catch(e => {
          return resolve([])
        })
      }
      if (node.level === 3) {
        // 初始化的时候请求第一个会话自学习子列表
        if (this.initSever) {
          this.initSever = false
          this.$nextTick(() => {
            setTimeout(() => {
              let el = this.$refs.industryTreeGroup
              let useEl = null
              for (let item of el.$children) {
                if (item.node.data.name === this.nowProtocol) {
                  useEl = this.findChildTree(item, node.childNodes[0].data.id)
                }
              }
              if (useEl) {
                useEl.click()
              }
            // let node1 = this.$refs.industryTreeGroup.getNode(node.data.child[0].id)
            // this.handleNodeClick(node1.data, node1)
            }, 200)
          })
        }
        return resolve(node.data.child)
      } else {
        return resolve([])
      }
    },
    // 找到需要点击的子树
    findChildTree (child, id) {
      for (const index in child.$children) {
        if (index > 1) {
          if (child.$children[index].node && this.defaultExpanded.includes(child.$children[index].node.data.id)) {
            return this.findChildTree(child.$children[index], id)
          } else if (child.$children[index].node && child.$children[index].node.data.id === id) {
            return child.$children[index].$el
          }
        }
      }
    },
    // 点击子树时请求列表
    handleNodeClick (data, node, event) {
      this.groupChildNode = []
      if (node.level > 3) {
        this.highLightFun(event)
        this.groupChildList = []
        this.nowForm.protocol = data.protocol
        this.nowForm.name = data.name
        this.nowForm.id = data.id
        let dataList = data.name.split(' | ')
        this.formParents.DESTINATION_IP = dataList[0]
        this.formParents.ipType = data.ipType
        this.formParents.protocol = data.protocol
        this.formParents.L4_PROTOCOL = this.protocolIpuse[data.type]
        this.formParents.mask = data.mask
        this.formParents.DESTINATION_PORT = dataList[1]
        this.formParents.filter_ip = this.nowRecord.filter_ip
        this.formParents.filter_port = this.nowRecord.filter_port
        this.industryParentsListData()
      }
    },
    // 列表数据请求
    industryParentsListData () {
      getIndustryServerClientArray(this.formParents).then(res => {
        this.groupChildList = []
        this.industryList = []
        // 给副树初始列表值
        this.form.serverip = this.formParents.DESTINATION_IP
        this.form.ipType = this.formParents.ipType
        this.form.protocol = this.formParents.protocol
        this.form.protocol_num = this.formParents.L4_PROTOCOL
        this.form.mask = this.formParents.mask
        this.form.DESTINATION_PORT = this.formParents.DESTINATION_PORT
        this.form.filter_ip = this.nowRecord.filter_ip
        this.form.filter_port = this.nowRecord.filter_port
        // -----------
        if (res.info && res.info.length > 0) {
          for (const index in res.info) {
            this.groupChildList.push({
              name: res.info[index].SOURCE_IP,
              id: Number(index) + 1,
              parent: `${this.formParents.DESTINATION_IP} | ${this.formParents.DESTINATION_PORT}`,
              ipType: this.formParents.ipType,
              protocol: this.formParents.protocol,
              L4_PROTOCOL: this.formParents.L4_PROTOCOL
            })
          }
          this.$nextTick(() => {
            this.$refs.industryChildTreeGroup.$el.children[0].click()
            if (this.selectList[this.nowForm.name] && this.selectList[this.nowForm.name].length > 0) {
              for (let item of this.selectList[this.nowForm.name]) {
                this.$refs.industryChildTreeGroup.setChecked(item.id, true)
              }
            }
          })
        }
      })
    },
    // 点击副子树时请求列表
    handleChildNodeClick (data, node, event) {
      this.highLightFunChild(event)
      this.form.DESTINATION_IP = data.name
      this.industryListData(1)
    },
    // 点击树时高亮
    highLightFun (event) {
      if (this.highlightEvent) {
        this.highlightEvent.$el.style.color = ''
        this.highlightEvent.$el.style.fontWeight = ''
        if (this.highlightEventChild) {
          this.highlightEventChild.$el.style.color = ''
          this.highlightEventChild.$el.style.fontWeight = ''
        }
      }
      this.highlightEventChild = null
      this.highlightEvent = event
      event.$el.style.color = '#1890ff'
      event.$el.style.fontWeight = 'bold'
    },
    // 点击树时高亮
    highLightFunChild (event) {
      if (this.highlightEventChild) {
        this.highlightEventChild.$el.style.color = ''
        this.highlightEventChild.$el.style.fontWeight = ''
      }
      this.highlightEventChild = event
      event.$el.style.color = '#1890ff'
      event.$el.style.fontWeight = 'bold'
    },
    // 列表数据请求
    industryListData (page) {
      this.form.page = page || this.form.page
      getIndustryInfoArray(this.form).then(res => {
        if (res.info && res.info.length > 0) {
          this.industryList = res.info
        } else {
          this.industryList = []
        }
      })
    },
    // 树多选框改变时触发
    handleCheckChange (data, value) {
      this.groupNode = this.$refs.industryTreeGroup.getCheckedNodes()
      let groupStr = []
      for (let item of this.groupNode) {
        groupStr.push(item.name)
      }
      this.groupStr = groupStr
      // 树取消选择时清空列表选择
      if (data.name === this.nowForm.name && this.childFlag) {
        for (let item of this.groupChildList) {
          this.$refs.industryChildTreeGroup.setChecked(item.id, value)
        }
      } else if (data.name !== this.nowFormName) {
        if (value) {
          let dataList = data.name.split(' | ')
          let form = {
            DESTINATION_IP: dataList[0],
            ipType: data.ipType,
            protocol: data.protocol,
            L4_PROTOCOL: this.protocolIpuse[data.type],
            mask: data.mask,
            DESTINATION_PORT: dataList[1],
            filter_ip: this.nowRecord.filter_ip,
            filter_port: this.nowRecord.filter_port
          }
          getIndustryServerClientArray(form).then(res => {
            this.selectList[data.name] = []
            for (const index in res.info) {
              this.selectList[data.name].push({
                name: res.info[index].SOURCE_IP,
                id: Number(index) + 1,
                parent: `${form.DESTINATION_IP} | ${form.DESTINATION_PORT}`,
                ipType: form.ipType,
                protocol: form.protocol,
                L4_PROTOCOL: form.L4_PROTOCOL
              })
            }
            let el = this.$refs.industryTreeGroup
            let useEl = null
            for (let item of el.$children) {
              if (item.node.data.name === data.protocol) {
                useEl = this.findTree(item.$children[2], data.id)
              }
            }
            if (useEl) {
              useEl.click()
            }
            this.countChange()
          })
        } else {
          this.selectList[data.name] = []
        }
      } else {
        this.childFlag = true
      }
      this.countChange()
    },
    // 找到需要点击的子树
    findTree (child, id) {
      let reStr = null
      for (const index in child.$children) {
        if (index > 1) {
          if (child.$children[index].node && child.$children[index].node.data.id === id) {
            return child.$children[index].$el
          } else if (child.$children[index].node) {
            reStr = this.findTree(child.$children[index], id)
            if (reStr) {
              return reStr
            }
          }
        }
      }
    },
    // 副树多选时触发
    handleSelectionChange (data) {
      // 判断列表多选框和树多选框之间的联动
      let node = this.groupChildNode || [] // 用于判断上一次选中的数量
      this.groupChildNode = this.$refs.industryChildTreeGroup.getCheckedNodes()
      this.selectList[this.nowForm.name] = this.groupChildNode
      if (this.groupChildNode.length === 1) {
        this.$refs.industryTreeGroup.setChecked(this.nowForm.id, true)
        // 上一次选中比这次多则不进行判断
        // 0到1的选择时禁止触发主树全选
        if (this.groupChildList.length !== 1 && node.length < this.groupChildNode.length) {
          this.childFlag = false
        }
      } else if (this.groupChildNode.length === 0) {
        this.$refs.industryTreeGroup.setChecked(this.nowForm.id, false)
      }
      this.countChange()
    },
    // 统计无有效数据
    countChange () {
      this.validCount = 0
      for (let item of this.groupStr) {
        if (this.selectList[item]) {
          if (this.selectList[item].length > 0) {
            this.validCount += 1
          }
        }
      }
    },
    // 添加按钮表单
    dialogVisible () {
      if (this.validCount > 0) {
        this.industryDialogVisible = true
        this.$nextTick(() => {
          let industryList = {}
          for (let item of this.groupNode) {
            industryList[item.name] = item.protocol
          }
          // 选中树（groupStr）和选中列表（selectList）数据
          this.$refs.refIndustryDialogVisible.init(this.groupStr, this.selectList, this.protocolData, industryList)
        })
      } else {
        this.$messages.error(this.$t('无有效数据'))
      }
    },
    templateDialog () {
      if (this.validCount > 0) {
        this.templateDialogVisible = true
        this.$nextTick(() => {
          let industryList = {}
          for (let item of this.groupNode) {
            industryList[item.name] = item.protocol
          }
          // 选中树（groupStr）和选中列表（selectList）数据
          this.$refs.refTemplateDialogVisible.init(this.groupStr, this.selectList, this.protocolData, industryList)
        })
      } else {
        this.$messages.error(this.$t('无有效数据'))
      }
    },
    // 展示添加成功后的结果
    dialogReVisible (data) {
      this.reDialogVisible = true
      this.$nextTick(() => {
        this.$refs.refReDialogVisible.init(data)
      })
    },
    // 查看详情
    detailDialog (data) {
      this.detailDialogVisible = true
      this.$nextTick(() => {
        this.$refs.refDetailDialogVisible.init(data, this.nowForm.protocol)
      })
    },
    selectClear () {
      this.record.mask = ''
      this.$forceUpdate()
    },
    isInteger (value) {
      return (!isNaN(value) && (parseInt(value).toString().length === String(Number(value)).length))
    }
  }
}
</script>
<style lang="less">
.industryTreeGroup {
  min-width: 240px;
  display: inline-block;

  .el-tree-node {
    >.el-tree-node__children {
      overflow: unset;
    }

    .is-leaf+.el-checkbox .el-checkbox__inner {
      display: inline-block;
    }

    .el-checkbox .el-checkbox__inner {
      display: none;
    }
  }
}

.maskAutocomplete {
  width: 155px;
  .el-input--prefix .el-input__inner {
    padding-left: 15px !important;
    padding-right: 80px !important;
  }
  .el-input__prefix {
    left: 77px;
  }
}
</style>
<style lang="scss" scoped>
.industryContainer {
  height: calc(100vh - 200px);
}

.industryPaneLIndustry {
  padding: 0;
  margin: 0;
  background-color: #fff;
  font-size: 18px;
  border-right: 1px solid #ddd;
  width: 251px !important;
  .industryTreeOutBorder {
    width: 250px !important;
    padding: 0;
    margin: 0;
    overflow-x: auto;
    height: calc(100vh - 200px);
  }
}

.industryPaneLServerChild {
  padding: 0;
  margin: 0;
  background-color: #fff;
  font-size: 18px;
  border-right: 1px solid #ddd;
  width: 241px !important;
  .industryTreeOutBorderChild {
    width: 240px !important;
    padding: 0;
    margin: 0;
    overflow-x: auto;
    height: calc(100vh - 200px);
  }
}

.el-divider {
  margin: 8px 0 !important;
}
.searchProject {
  text-align: right;
  float: right;
}
</style>
